<script lang="ts" setup>
import {
  CheckCircleTwoTone,
  CloseCircleTwoTone,
  Loading3QuartersOutlined,
  QuestionCircleOutlined,
} from '@ant-design/icons-vue'

defineProps<{
  status?: {
    succeed: number
    fail: number
    running: number
    unknown: number
  }
}>()
</script>

<template>
  <div v-if="status" class="task-status">
    <span> <CheckCircleTwoTone two-tone-color="#52c41a" />{{ status.succeed }} </span>
    <span><CloseCircleTwoTone two-tone-color="#ff0000" />{{ status.fail }}</span>
    <span> <Loading3QuartersOutlined :spin="!!status.running" />{{ status.running }} </span>
    <span> <QuestionCircleOutlined />{{ status.unknown }} </span>
  </div>
</template>

<style lang="less" scoped>
.task-status {
  font-size: 14px;
  * {
    padding: 0 1px;
  }
}
</style>
